import { memo, useState } from "react";

import { HomeSectionV2Wrapper } from "./style";
import { RoomList } from "@/components/room-list";
import { SecessionHeader } from "@/components/secession-header";
import { SeactionTabs } from "@/components/section-tabs";
import { SectionFooter } from "@/components/section-footer";
export const HomeSectionV2 = memo(
    (props) => {
        const { dataInfo = {} } = props;
        const tabs = dataInfo?.dest_address?.map(item => {
            return item.name;
        })
        const initialData = Object.keys(dataInfo?.dest_list)?.[0];
        const [currentName, setCurrentName] = useState(initialData);
        const changeCityName = (index) => {
            setCurrentName(tabs?.[index]);
        }

        return (
            <HomeSectionV2Wrapper>
                <SecessionHeader title={dataInfo?.title} subtitle={dataInfo?.subtitle}></SecessionHeader>
                <SeactionTabs tabs={tabs} changeCityName={changeCityName}></SeactionTabs>
                <RoomList RoomList={dataInfo?.dest_list?.[currentName]} itemwidth={33.33} ></RoomList>
                <SectionFooter name={currentName}></SectionFooter>
            </HomeSectionV2Wrapper>
        )
    }
)